<template>
  <div class="index_footer">
    <div @click="gotoRouter('')">首页</div>
    <div @click="gotoRouter('createNote')">写日记</div>
    <div @click="gotoRouter('mine')">我的</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();

const gotoRouter = val => {
  console.log(val);
  if (val === '') {
    router.push('/');
  } else if (val === 'createNote') {
    router.push('createNote');
  } else {
    router.push('mine');
  }
};
</script>

<style class="less" scoped>
.index_footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: rgb(94, 153, 243);
  height: 56px;
  line-height: 56px;
  display: flex;
  justify-content: space-around;
  div {
    /* background-color: rgb(133, 181, 255); */
    width: 100px;
    color: white;
    text-align: center;
    border-radius: 12px;
  }
}
</style>
